<template>
  <div class="music">
    <div class="music-content" :class="{ 'hide-sheet': sheetVisible }">
      <div class="music-left">
        <music-btn @onClickLyric="handleOpenLyric" @onClickSheet="handleOpenSheet" />
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" class="music-list" />
        </keep-alive>
        <router-view
          v-if="!$route.meta.keepAlive"
          :key="$route.path"
          class="music-list"
        />
      </div>
      <div class="music-right" :class="{ show: currentMusic.id && (lyricVisible || sheetVisible), hide: !currentMusic.id || (!lyricVisible && !sheetVisible) }">
        <div v-show="lyricVisible || sheetVisible" class="toggle-content" @click="handleToggleContent">
          {{ lyricVisible ? '切换歌谱' : '切换歌词' }}
        </div>
        <lyric
          v-show="lyricVisible"
          ref="lyric"
          :lyric="lyric"
          :nolyric="nolyric"
          :lyric-index="lyricIndex"
        />
        <div
          v-show="sheetVisible"
          class="sheet-container"
        >
          <div v-if="sheetUrls.length > 0" class="carousel">
            <div
              class="carousel-inner"
              :style="{ transform: `translateX(-${currentSheetIndex * 100}%)` }"
            >
              <div
                v-for="(url, index) in sheetUrls"
                :key="index"
                class="carousel-item"
                @click="zoomSheet(index)"
              >
                <img :src="url" alt="歌谱" class="sheet-image" />
              </div>
            </div>
            <div v-if="sheetUrls.length > 1" class="carousel-controls">
              <button
                class="carousel-control prev"
                @click.stop="prevSheet"
              >
                ‹
              </button>
              <span class="carousel-indicator">{{ currentSheetIndex + 1 }} / {{ sheetUrls.length }}</span>
              <button
                class="carousel-control next"
                @click.stop="nextSheet"
              >
                ›
              </button>
            </div>
          </div>
          <div v-else class="no-sheet">暂无歌谱</div>
        </div>
      </div>
    </div>

    <!-- 歌谱放大查看器 -->
    <div
      v-if="sheetZoomVisible"
      class="sheet-zoom-overlay"
      @click.self="sheetZoomVisible = false"
    >
      <div class="zoom-carousel">
        <div
          class="zoom-carousel-inner"
          :style="{ transform: `translateX(-${currentSheetIndex * 100}%)` }"
        >
          <div
            v-for="(url, index) in sheetUrls"
            :key="index"
            class="zoom-carousel-item"
          >
            <img :src="url" alt="歌谱" />
          </div>
        </div>
      </div>
      <div v-if="sheetUrls.length > 1" class="zoom-carousel-controls">
        <button
          class="zoom-carousel-control prev"
          @click.stop="prevSheet"
        >
          ‹
        </button>
        <span class="zoom-carousel-indicator">{{ currentSheetIndex + 1 }} / {{ sheetUrls.length }}</span>
        <button
          class="zoom-carousel-control next"
          @click.stop="nextSheet"
        >
          ›
        </button>
      </div>
      <button
        class="close-zoom"
        @click="sheetZoomVisible = false"
      >
        ×
      </button>
    </div>

    <!--播放器-->
    <div
      class="music-bar"
      :class="{ disable: !musicReady || !currentMusic.id }"
    >
      <div class="music-bar-btns">
        <mm-icon
          class="pointer"
          type="prev"
          :size="36"
          title="上一曲 Ctrl + Left"
          @click="prev"
        />
        <div
          class="control-play pointer"
          title="播放暂停 Ctrl + Space"
          @click="play"
        >
          <mm-icon :type="playing ? 'pause' : 'play'" :size="24" />
        </div>
        <mm-icon
          class="pointer"
          type="next"
          :size="36"
          title="下一曲 Ctrl + Right"
          @click="next"
        />
      </div>
      <div class="music-music">
        <div class="music-bar-info">
          <template v-if="currentMusic && currentMusic.id">
            {{ currentMusic.name }}
            <span>- {{ currentMusic.artist }}</span>
          </template>
          <template v-else>欢迎使用轻轻听</template>
        </div>
        <div v-if="currentMusic.id" class="music-bar-time">
          {{ currentTime | format }}/{{ currentMusic.duration % 3600 | format }}
        </div>
        <mm-progress
          class="music-progress"
          :percent="percentMusic"
          :percent-progress="currentProgress"
          @percentChange="progressMusic"
          @percentChangeEnd="progressMusicEnd"
        />
      </div>

      <!-- 播放模式 -->
      <mm-icon
        class="icon-color pointer mode"
        :type="getModeIconType()"
        :title="getModeIconTitle()"
        :size="30"
        @click="modeChange"
      />

      <!-- 定位当前歌曲 -->
      <mm-icon
        class="icon-color pointer favorite"
        type="ic_queue_music"
        title="定位当前歌曲"
        :size="30"
        @click="locateCurrentSong"
      />

      <!-- 音量控制 -->
      <div class="music-bar-volume" title="音量加减 [Ctrl + Up / Down]">
        <volume :volume="volume" @volumeChange="volumeChange" />
      </div>
    </div>

    <!--遮罩-->
    <div class="mmPlayer-bg" :style="{ backgroundImage: pic_url }"></div>
    <div class="mmPlayer-mask"></div>
  </div>
</template>

<script>
import { getLyric, getSpectrum } from 'api'

import mmPlayerMusic from './mmPlayer'
import {
  parseLyric,
  format,
  silencePromise
} from '@/utils/util'
import { playMode, defaultBG } from '@/config'
import { getVolume, setVolume, getPlayState, setPlayState, clearPlayState } from '@/utils/storage'
import { mapGetters, mapMutations, mapActions } from 'vuex'

import MmProgress from 'base/mm-progress/mm-progress'
import MusicBtn from 'components/music-btn/music-btn'
import Lyric from 'components/lyric/lyric'
import Volume from 'components/volume/volume'

export default {
  name: 'Music',
  components: {
    MmProgress,
    MusicBtn,
    Lyric,
    Volume
  },
  filters: {
    // 时间格式化
    format
  },
  data() {
    const volume = getVolume()
    return {
      musicReady: false, // 是否可以使用播放器
      currentTime: 0, // 当前播放时间
      currentProgress: 0, // 当前缓冲进度
      lyricVisible: false, // 移动端歌词显示
      sheetVisible: false, // 歌谱显示状态
      lyric: [], // 歌词
      nolyric: false, // 是否有歌词
      lyricIndex: 0, // 当前播放歌词下标
      isMute: false, // 是否静音
      volume, // 音量大小
      sheetUrls: [], // 歌谱图片URL列表
      noSheet: false, // 是否有歌谱
      currentSheetIndex: 0, // 当前歌谱索引
      sheetZoomVisible: false // 歌谱放大查看器
    }
  },
  computed: {
    pic_url() {
      return this.currentMusic.id && this.currentMusic.pic_url
        ? `url(${this.currentMusic.pic_url.path}?param=300y300)`
        : `url(${defaultBG})`
    },
    percentMusic() {
      const duration = this.currentMusic.duration
      return this.currentTime && duration ? this.currentTime / duration : 0
    },
    ...mapGetters([
      'audioEle',
      'mode',
      'playing',
      'playlist',
      'orderList',
      'currentIndex',
      'currentMusic',
      'historyList'
    ])
  },
  watch: {
    currentMusic(newMusic, oldMusic) {
      if (!newMusic.id) {
        this.lyric = []
        this.sheetUrls = []
        this.noSheet = true
        this.lyricVisible = false
        this.sheetVisible = false
        return
      }
      if (newMusic.id === oldMusic.id) {
        return
      }
      this.audioEle.src = newMusic.url
      // 重置相关参数
      this.lyricIndex = this.currentTime = this.currentProgress = 0

      // 保持当前的显示状态（歌词或歌谱）
      // 如果当前没有显示任何面板，则默认显示歌词
      if (!this.lyricVisible && !this.sheetVisible) {
        this.lyricVisible = true
        this.sheetVisible = false
      }
      // 如果当前显示歌谱，保持显示歌谱
      // 如果当前显示歌词，保持显示歌词

      silencePromise(this.audioEle.play())
      this.$nextTick(() => {
        this._getLyric(newMusic.id)
        this._getSpectrum(newMusic.id)
        // 确保歌词组件正确初始化
        if (this.$refs.lyric && this.$refs.lyric.clacTop) {
          this.$refs.lyric.clacTop()
        }
      })

      // 保存播放状态
      this.savePlayState()
    },
    playing(newPlaying) {
      const audio = this.audioEle
      this.$nextTick(() => {
        newPlaying ? silencePromise(audio.play()) : audio.pause()
        this.musicReady = true
      })

      // 保存播放状态
      this.savePlayState()
    },
    currentTime(newTime) {
      if (this.nolyric) {
        return
      }
      let lyricIndex = 0
      for (let i = 0; i < this.lyric.length; i++) {
        if (newTime > this.lyric[i].time) {
          lyricIndex = i
        }
      }
      this.lyricIndex = lyricIndex

      // 每10秒保存一次播放进度
      if (Math.floor(newTime) % 10 === 0) {
        this.savePlayState()
      }
    },
    $route() {
      this.lyricVisible = false
    },
    // 监听音量变化，自动保存
    volume() {
      this.savePlayState()
    },
    // 监听播放模式变化，自动保存
    mode() {
      this.savePlayState()
    }
  },
  mounted() {
    this.$nextTick(() => {
      mmPlayerMusic.initAudio(this)
      this.initKeyDown()
      this.volumeChange(this.volume)

      // 延迟恢复播放状态，确保音频元素已经初始化完成
      setTimeout(() => {
        this.restorePlayState()
      }, 100)
    })

    // 监听页面刷新事件，保存播放状态
    window.addEventListener('beforeunload', this.savePlayState)

    // 监听隐藏歌词歌谱事件
    this.$eventBus && this.$eventBus.$on('hideLyricSheet', this.hideLyricSheet)
    this.$eventBus && this.$eventBus.$on('closeLyricSheet', this.closeLyricSheet)
    this.$eventBus && this.$eventBus.$on('closeLyricSheet', this.closeLyricSheet)
  },
  beforeDestroy() {
    // 组件销毁前保存播放状态
    this.savePlayState()
    // 移除事件监听器
    window.removeEventListener('beforeunload', this.savePlayState)
    // 移除自定义事件监听器
    this.$eventBus && this.$eventBus.$off('hideLyricSheet', this.hideLyricSheet)
    this.$eventBus && this.$eventBus.$off('closeLyricSheet', this.closeLyricSheet)
  },
  methods: {
    // 按键事件
    initKeyDown() {
      document.onkeydown = e => {
        switch (e.keyCode) {
          case 32: // 播放暂停Space
            this.play()
            break
          case 37: // 上一曲Left
            this.prev()
            break
          case 38: // 音量加Up
            let plus = Number((this.volume += 0.1).toFixed(1))
            if (plus > 1) {
              plus = 1
            }
            this.volumeChange(plus)
            break
          case 39: // 下一曲Right
            this.next()
            break
          case 40: // 音量减Down
            let reduce = Number((this.volume -= 0.1).toFixed(1))
            if (reduce < 0) {
              reduce = 0
            }
            this.volumeChange(reduce)
            break
          case 79: // 切换播放模式O
            this.modeChange()
            break
        }
      }
    },
    // 上一曲
    prev() {
      if (!this.musicReady) {
        return
      }
      if (this.playlist.length === 1) {
        this.loop()
      } else {
        let index
        if (this.mode === playMode.random) {
          // 随机模式：随机选择一首歌（排除当前歌曲）
          const availableIndexes = []
          for (let i = 0; i < this.playlist.length; i++) {
            if (i !== this.currentIndex) {
              availableIndexes.push(i)
            }
          }
          index = availableIndexes[Math.floor(Math.random() * availableIndexes.length)]
        } else if (this.mode === playMode.loop) {
          // 单曲循环：重新播放当前歌曲
          this.loop()
          return
        } else {
          // 其他模式：按顺序上一首
          index = this.currentIndex - 1
          if (index < 0) {
            index = this.playlist.length - 1
          }
        }
        this.setCurrentIndex(index)
        if (!this.playing && this.musicReady) {
          this.setPlaying(true)
        }
        this.musicReady = false
      }
    },
    // 播放暂停
    play() {
      if (!this.musicReady) {
        return
      }
      this.setPlaying(!this.playing)
    },
    // 下一曲
    // 当 flag 为 true 时，表示上一曲播放失败
    next(flag = false) {
      if (!this.musicReady) {
        return
      }
      const {
        playlist: { length }
      } = this

      // 如果只有一首歌且播放失败，停止播放
      if (length === 1 && flag) {
        this.setCurrentIndex(-1)
        this.setPlaying(false)
        return
      }

      if (length === 1) {
        this.loop()
      } else {
        let index

        if (this.mode === playMode.random) {
          // 随机模式：随机选择一首歌（排除当前歌曲）
          const availableIndexes = []
          for (let i = 0; i < length; i++) {
            if (i !== this.currentIndex) {
              availableIndexes.push(i)
            }
          }
          index = availableIndexes[Math.floor(Math.random() * availableIndexes.length)]
        } else if (this.mode === playMode.order) {
          // 顺序播放：播放到最后一首就停止
          if (this.currentIndex === length - 1) {
            this.setCurrentIndex(-1)
            this.setPlaying(false)
            return
          }
          index = this.currentIndex + 1
        } else if (this.mode === playMode.loop) {
          // 单曲循环：重新播放当前歌曲
          this.loop()
          return
        } else {
          // 列表循环：按顺序播放，到最后一首后回到第一首
          index = this.currentIndex + 1
          if (index === length) {
            index = 0
          }
        }

        if (!this.playing && this.musicReady) {
          this.setPlaying(true)
        }
        this.setCurrentIndex(index)
        this.musicReady = false
      }
    },
    // 循环
    loop() {
      this.audioEle.currentTime = 0
      silencePromise(this.audioEle.play())
      this.setPlaying(true)
      if (this.lyric.length > 0) {
        this.lyricIndex = 0
      }
    },
    // 修改音乐显示时长
    progressMusic(percent) {
      this.currentTime = this.currentMusic.duration * percent
    },
    // 修改音乐进度
    progressMusicEnd(percent) {
      this.audioEle.currentTime = this.currentMusic.duration * percent
    },
    // 切换播放顺序
    modeChange() {
      const mode = (this.mode + 1) % 4
      this.setPlayMode(mode)

      // 根据不同模式设置播放列表
      let list = []
      switch (mode) {
        case playMode.listLoop:
        case playMode.order:
          // 列表循环和顺序播放使用原始顺序
          list = [...this.orderList]
          break
        case playMode.random:
          // 随机播放保持当前播放列表，通过 next/prev 方法实现随机选择
          list = [...this.orderList]
          break
        case playMode.loop:
          // 单曲循环保持当前播放列表不变
          list = [...this.playlist]
          break
      }

      // 重新设置当前歌曲在新列表中的索引
      this.resetCurrentIndex(list)
      this.setPlaylist(list)
    },
    // 修改当前歌曲索引
    resetCurrentIndex(list) {
      const index = list.findIndex(item => {
        return item.id === this.currentMusic.id
      })
      this.setCurrentIndex(index)
    },
    // 修改音量大小
    volumeChange(percent) {
      percent === 0 ? (this.isMute = true) : (this.isMute = false)
      this.volume = percent
      this.audioEle.volume = percent
      setVolume(percent)
    },
    // 获取播放模式 icon
    getModeIconType() {
      return {
        [playMode.listLoop]: 'loop',
        [playMode.order]: 'sequence',
        [playMode.random]: 'random',
        [playMode.loop]: 'loop-one'
      }[this.mode]
    },
    // 获取播放模式 title
    getModeIconTitle() {
      const key = 'Ctrl + O'
      return {
        [playMode.listLoop]: `列表循环 ${key}`,
        [playMode.order]: `顺序播放 ${key}`,
        [playMode.random]: `随机播放 ${key}`,
        [playMode.loop]: `单曲循环 ${key}`
      }[this.mode]
    },
    // 切换歌词显示
    handleToggleLyric() {
      this.lyricVisible = !this.lyricVisible
      if (this.lyricVisible) {
        this.sheetVisible = false
      }
      this.$nextTick(() => {
        if (this.lyricVisible) {
          this.$refs.lyric.clacTop()
        }
      })
    },
    // 打开歌词（来自 music-btn 事件）
    handleOpenLyric() {
      this.lyricVisible = true
      this.sheetVisible = false
      this.$nextTick(() => {
        if (this.$refs.lyric && this.$refs.lyric.clacTop) {
          this.$refs.lyric.clacTop()
        }
      })
    },
    // 打开歌谱（来自 music-btn 事件）
    handleOpenSheet() {
      this.sheetVisible = true
      this.lyricVisible = false
    },
    // 切换歌词和歌谱内容
    handleToggleContent() {
      if (this.lyricVisible) {
        // 当前显示歌词，切换到歌谱
        this.lyricVisible = false
        this.sheetVisible = true
      } else if (this.sheetVisible) {
        // 当前显示歌谱，切换到歌词
        this.sheetVisible = false
        this.lyricVisible = true
        this.$nextTick(() => {
          if (this.$refs.lyric && this.$refs.lyric.clacTop) {
            this.$refs.lyric.clacTop()
          }
        })
      }
    },
    // 隐藏歌词歌谱面板
    hideLyricSheet() {
      this.lyricVisible = false
      this.sheetVisible = false
    },
    // 关闭歌词歌谱面板（别名方法，保持兼容性）
    closeLyricSheet() {
      this.lyricVisible = false
      this.sheetVisible = false
    },
    // 切换歌谱显示
    handleToggleSheet() {
      this.sheetVisible = !this.sheetVisible
      if (this.sheetVisible) {
        this.lyricVisible = false
      }
    },
    // 上一页歌谱
    prevSheet() {
      if (this.sheetUrls.length > 1) {
        this.currentSheetIndex =
          (this.currentSheetIndex - 1 + this.sheetUrls.length) %
          this.sheetUrls.length
      }
    },
    // 下一页歌谱
    nextSheet() {
      if (this.sheetUrls.length > 1) {
        this.currentSheetIndex = (this.currentSheetIndex + 1) % this.sheetUrls.length
      }
    },
    // 放大歌谱
    zoomSheet(index) {
      this.currentSheetIndex = index
      this.sheetZoomVisible = true
    },
    // 获取歌词
    _getLyric(id) {
      getLyric(id).then(res => {
        if (res.nolyric) {
          this.nolyric = true
        } else {
          this.nolyric = false
          this.lyric = parseLyric(res.lyric)
        }
        silencePromise(this.audioEle.play())
      })
    },
    // 获取歌谱
    _getSpectrum(id) {
      getSpectrum(id)
        .then(res => {
          const hasArray =
            res && Array.isArray(res.spectrum) && res.spectrum.length > 0
          if (!res || res.nospectrum || !hasArray) {
            this.sheetUrls = []
            this.noSheet = true
            return
          }
          this.sheetUrls = res.spectrum
          this.noSheet = false
          this.currentSheetIndex = 0
        })
        .catch(() => {
          this.sheetUrls = []
          this.noSheet = true
        })
    },
    // 定位当前播放歌曲
    locateCurrentSong() {
      if (!this.currentMusic.id) {
        this.$mmToast('当前没有播放歌曲')
        return
      }

      // 查找当前正在播放的歌曲元素（带有 on 类名的 list-item）
      const currentSongElement = document.querySelector('.list-item.on')

      if (currentSongElement) {
        // 找到了当前歌曲元素，滚动到该位置
        currentSongElement.scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        })

        // 高亮当前歌曲
        currentSongElement.classList.add('highlight-current')
        setTimeout(() => {
          currentSongElement.classList.remove('highlight-current')
        }, 2000)

        this.$mmToast('已定位到当前歌曲')
      } else {
        // 如果在当前页面找不到，尝试跳转到播放列表页面
        if (this.$route.path !== '/music/playList') {
          this.$mmToast('正在跳转到播放列表...')
          this.$router.push('/music/playList').then(() => {
            // 跳转后再次尝试定位
            setTimeout(() => {
              this.locateCurrentSong()
            }, 500)
          })
        } else {
          this.$mmToast('正在加载播放列表...')
          // 在播放列表页面但找不到歌曲，可能是列表还在加载，等待1秒后重试
          setTimeout(() => {
            const retryElement = document.querySelector('.list-item.on')
            if (retryElement) {
              retryElement.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
              })
              retryElement.classList.add('highlight-current')
              setTimeout(() => {
                retryElement.classList.remove('highlight-current')
              }, 2000)
              this.$mmToast('已定位到当前歌曲')
            } else {
              this.$mmToast('当前歌曲不在播放列表中')
            }
          }, 1000)
        }
      }

      // 发送事件到父组件，让其他组件也能响应定位请求
      this.$emit('locateCurrentSong', this.currentMusic.id)
    },
    // 保存播放状态到本地存储
    savePlayState() {
      if (this.currentMusic.id && this.audioEle) {
        const playState = {
          currentMusic: this.currentMusic,
          currentTime: this.audioEle.currentTime || 0,
          playing: this.playing,
          mode: this.mode,
          playlist: this.playlist,
          orderList: this.orderList,
          currentIndex: this.currentIndex,
          volume: this.volume,
          timestamp: Date.now()
        }
        setPlayState(playState)
      }
    },
    // 从本地存储恢复播放状态
    restorePlayState() {
      const playState = getPlayState()
      if (playState && playState.currentMusic && playState.currentMusic.id) {
        // 检查保存的状态是否过期（超过24小时则不恢复）
        const now = Date.now()
        const savedTime = playState.timestamp || 0
        const maxAge = 24 * 60 * 60 * 1000 // 24小时

        if (now - savedTime > maxAge) {
          clearPlayState()
          return
        }

        // 先恢复播放列表和当前歌曲
        this.setPlaylist(playState.playlist || [])
        this.setOrderList(playState.orderList || [])
        this.setPlayMode(playState.mode || 0)
        this.setCurrentIndex(playState.currentIndex || 0)

        // 恢复音量
        if (playState.volume !== undefined) {
          this.volume = playState.volume
          setVolume(playState.volume)
        }

        // 等待音频元素和歌曲加载完成
        const restoreAudioState = () => {
          if (this.audioEle && this.currentMusic.id === playState.currentMusic.id) {
            // 监听音频可以播放事件
            const onCanPlay = () => {
              // 设置播放进度
              if (playState.currentTime > 0) {
                this.audioEle.currentTime = playState.currentTime
                this.currentTime = playState.currentTime
              }

              // 设置音量
              this.audioEle.volume = this.volume

              // 确保音频准备就绪
              this.musicReady = true

              // 如果之前是播放状态，则继续播放
              if (playState.playing) {
                setTimeout(() => {
                  silencePromise(this.audioEle.play()).then(() => {
                    // 播放成功后设置状态
                    this.setPlaying(true)
                    this.$mmToast('已恢复播放状态')
                  }).catch(() => {
                    // 如果自动播放失败，将播放状态设为暂停
                    this.setPlaying(false)
                    this.$mmToast('已恢复播放进度，请手动点击播放')
                  })
                }, 100)
              } else {
                // 如果之前是暂停状态，确保设置为暂停
                this.setPlaying(false)
                this.$mmToast('已恢复播放进度')
              }
            }

            // 如果音频已经可以播放，直接恢复
            if (this.audioEle.readyState >= 3) {
              onCanPlay()
            } else {
              // 否则等待音频准备就绪
              this.audioEle.addEventListener('canplay', onCanPlay, { once: true })

              // 设置超时，避免无限等待
              setTimeout(() => {
                if (!this.musicReady) {
                  onCanPlay()
                }
              }, 3000)
            }
          } else {
            // 如果还没有准备好，继续等待
            setTimeout(restoreAudioState, 200)
          }
        }

        // 延迟执行，确保 Vuex 状态已经更新
        setTimeout(restoreAudioState, 300)
      }
    },

    ...mapMutations({
      setPlaying: 'SET_PLAYING',
      setPlaylist: 'SET_PLAYLIST',
      setOrderList: 'SET_ORDERLIST',
      setCurrentIndex: 'SET_CURRENTINDEX'
    }),
    ...mapActions(['setHistory', 'setPlayMode'])
  }
}
</script>

<style lang="less">
.music {
  padding: 75px 25px 25px 25px;
  width: 100%;
  max-width: 1750px;
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .music-content {
    display: flex;
    width: 100%;
    height: calc(~'100% - 80px');
    .music-left {
      flex: 1;
      height: 100%;
      overflow: hidden;
      .music-list {
        height: calc(~'100% - 60px');
      }
    }
  .music-right {
    position: relative;
    width: 310px;
    margin-left: 10px;
    &.show {
      display: block;
    }
    &.hide {
      display: none;
    }
        .close-lyric {
          position: absolute;
          top: 0;
          z-index: 1;
          cursor: pointer;
          &.active {
            color: @text_color_active;
            text-decoration: none;
          }
        }
        .close-image {
          position: absolute;
          top: 0;
          z-index: 1;
          cursor: pointer;
          &.active {
            color: @text_color_active;
            text-decoration: none;
          }
        }
        .toggle-content {
          position: absolute;
          top: 0;
          z-index: 1;
          cursor: pointer;
          color: @text_color_active;
          text-decoration: none;
          &:hover {
            opacity: 0.8;
          }
        }
        .sheet-container {
          width: 100%;
          height: 110%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .carousel {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            .carousel-inner {
              display: flex;
              height: 100%;
              transition: transform 0.3s ease;
              .carousel-item {
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: zoom-in;
                .sheet-image {
                  max-width: 100%;
                  max-height: 90%;
                  object-fit: contain;
                }
              }
            }
            .carousel-controls {
              position: absolute;
              bottom: 10px;
              left: 50%;
              transform: translateX(-50%);
              background-color: rgba(0, 0, 0, 0.5);
              border-radius: 15px;
              padding: 5px 10px;
              display: flex;
              align-items: center;
              color: #fff;
              .carousel-control {
                background: none;
                border: none;
                color: #fff;
                font-size: 20px;
                cursor: pointer;
                padding: 0 10px;
              }
              .carousel-indicator {
                font-size: 14px;
                margin: 0 5px;
              }
            }
          }
          .no-sheet {
            color: #fff;
            font-size: 16px;
            text-align: center;
          }
        }
    }
  }

  /*底部mmPlayer-bar*/
  .music-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    padding-bottom: 15px;
    color: #fff;
    &.disable {
      pointer-events: none;
      opacity: 0.6;
    }
    .icon-color {
      color: #fff;
    }
    .music-bar-btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 180px;
      .control-play {
        .flex-center;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        color: #fff;
        background-color: rgba(255, 255, 255, 0.3);
        .icon-bofang101 {
          transform: translateX(2px);
        }
      }
    }

    .flex-center;
    .btn-prev {
      width: 19px;
      min-width: 19px;
      height: 20px;
      background-position: 0 -30px;
    }
    .btn-play {
      width: 21px;
      min-width: 21px;
      height: 29px;
      margin: 0 50px;
      background-position: 0 0;
      &.btn-play-pause {
        background-position: -30px 0;
      }
    }
    .btn-next {
      width: 19px;
      min-width: 19px;
      height: 20px;
      background-position: 0 -52px;
    }
    .music-music {
      position: relative;
      width: 100%;
      flex: 1;
      box-sizing: border-box;
      padding-left: 40px;
      font-size: @font_size_small;
      color: @text_color_active;
      .music-bar-info {
        height: 15px;
        padding-right: 80px;
        line-height: 15px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .music-bar-time {
        position: absolute;
        top: 0;
        right: 5px;
      }
    }
    .mode,
    .locate,
    .favorite,
    .music-bar-volume {
      margin-left: 20px;
    }

    // 音量控制
    .volume-wrapper {
      margin-left: 20px;
      width: 150px;
    }
  }

  /*遮罩*/
  .mmPlayer-mask,
  .mmPlayer-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

  .mmPlayer-mask {
    z-index: -1;
    background-color: @mask_color;
  }

  .mmPlayer-bg {
    z-index: -2;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(12px);
    opacity: 0.7;
    transition: all 0.8s;
    transform: scale(1.1);
  }

  .sheet-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .close-zoom {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 30px;
      color: #fff;
      background: none;
      border: none;
      cursor: pointer;
    }
    .zoom-carousel {
      width: 90vw;
      height: 90vh;
      overflow: hidden;
      position: relative;
      .zoom-carousel-inner {
        display: flex;
        height: 100%;
        transition: transform 0.3s ease;
        .zoom-carousel-item {
          flex-shrink: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }
      }
    }
    .zoom-carousel-controls {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      .zoom-carousel-control {
        background: rgba(0, 0, 0, 0.3);
        border: none;
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        padding: 0;
        margin: 0 20px;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        &:hover {
          background: rgba(0, 0, 0, 0.5);
        }
      }
      .zoom-carousel-indicator {
        color: #fff;
        font-size: 18px;
        margin: 0 15px;
        min-width: 60px;
        text-align: center;
      }
    }
  }

  // 高亮当前歌曲的样式
  .highlight-current {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid @text_color_active !important;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  @media (min-width: 960px) {
    .close-lyric {
      // display: none;
    }
  }

  //当屏幕小于960时
  @media (max-width: 960px) {
    .music-right {
      display: none;
      &.show {
        display: block;
        margin-left: 0;
        width: 100%;
      }
      &.hide {
        // display: none;
      }
    }
  }
  //当屏幕小于768时
  @media (max-width: 768px) {
    & {
      padding: 75px 15px 5px 15px;
    }

    .music-content .music-left {
      .music-list {
        font-size: @font_size_medium;
      }
    }

    .music-bar {
      .music-bar-info span,
      .music-bar-volume .mmProgress {
        display: none;
      }
    }
  }
  //当屏幕小于520时
  @media (max-width: 520px) {
    .music-bar {
      position: relative;
      flex-direction: column;
      .music-bar-btns {
        width: 60%;
        margin-top: 15px;
        order: 2;
      }
      .music-music {
        padding-left: 0;
        order: 1;
      }
      & > i.mode {
        position: absolute;
        top: 40px;
        left: 5px;
        margin: 0;
      }
      .favorite {
        position: absolute;
        top: 40px;
        right: 5px;
      }
      .music-bar-volume {
        display: none;
      }
    }
  }
}
</style>
